<script setup lang="ts" name="App">

    import { reactive, ref, watch, watchEffect } from "vue";
   import {IUser}  from "./interface.ts";
    var geyaoTest = reactive<IUser>({
     name:"geyao",
     age:18,
     sex:"男"
    })
       //  var name = ref("geyao")
       // var age = ref(18)
   
       const handleName = () => {
         geyaoTest.name +="-" 
       };
       const handleAge = () => {
         geyaoTest.age += 1
       };
       // watch(name,(newValue, oldValue) => {
       //   console.log("name", newValue, oldValue);
       // });
       // watch(age,(newValue, oldValue) => {
       //   console.log("age", newValue, oldValue);
       // });
       watch([()=>geyaoTest.name,()=>geyaoTest.age],([newName, newAge]) => {
         console.log("all", newName, newAge);
       });
       watchEffect(() => {
         console.log("watchEffect", geyaoTest.name, geyaoTest.age);
       });
       </script>
       
       <template>
         <div>
           {{geyaoTest.name}}-{{geyaoTest.age}}
   
         </div>
         <button @click="handleName">修改姓名</button>
         <button @click="handleAge">修改年龄</button>
    
       </template>
       
       <style scoped>
       
       </style>
       
       
       
       
       